<template>
  <!--  -->
  <!-- 预览弹窗 -->
  <!--  -->

  <div class="window" v-if="show">

    <div class="window-mask" @click="close" v-if="show"></div>
    <!-- 右上角 X 图标 -->
    <div class="close" @click="close">
        <span class="iconfont icon-close2"></span>
    </div>

    <!-- 弹窗 -->
    <div class="window-content" :style="{ top: '0px', left: windowContentLeft + 'px', width: windowContentWidth + 'px' }">
        <!-- 标题 -->
        <div class="title">{{ title }}</div>
        <!-- 内容 align: 如果是视频则上下居中，否则上边距为0 -->
        <div class="content-body" :style="{ 'align-items' : 'align' }">
            <slot></slot>
        </div>
    </div>
  </div>
  
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, onMounted, watch, computed, onUnmounted } from "vue";
const { proxy } = getCurrentInstance();

//接收父组件的参数
const props = defineProps({
    show: {
        type: Boolean,
    },
    width: {
        type: Number,
        default: 1000,
    },
    title: {
        type: String,
    },
    align: {
        type: String,
        default: "top",
    },
});

//获取浏览器的宽度
const windowWidth = ref(window.innerWidth); 
//视频弹窗的宽度  (使用computed计算属性，在70行发生时，也会再重新计算)
const windowContentWidth = computed(() => {
    return props.width > windowWidth ? windowWidth.value : props.width;  //传递的宽度不能大于系统宽度
});
//视频弹窗的左边距
const windowContentLeft = computed(() => {
    let left = windowWidth.value - props.width;
    return left < 0 ? 0 : left / 2;
});


//关闭弹窗
const emit = defineEmits(["close"]);   
const close = () => {
    emit("close");
};


//监控浏览器的宽度
const resizeWindow = () => {
    windowWidth.value = window.innerWidth;
};


//在Vue3 中,onMounted 是一个生命周期钩子函数,用于在组件渲染后执行（在<script>标签头部引入）
onMounted(() => {
    window.addEventListener("resize", resizeWindow);
});


onUnmounted(() => {
    window.removeEventListener("resize", resizeWindow);
})

</script>

<style lang="scss" scoped>
.window {
    .window-mask {
        top: 0px;
        left: 0px;
        width: 100%;
        height: calc(100vh);
        z-index: 200;
        opacity: 0.5;
        background: #000;
        position: fixed;
    }

    .close {
        z-index: 202;
        cursor: pointer;
        position: absolute;
        top: 40px;
        right: 30px;
        width: 44px;
        height: 44px;
        border-radius: 22px;
        background: #606266;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
            font-size: 20px;
            color: #fff;
            z-index: 100000;
        }
    }

    .window-content {
        top: 0px;
        z-index: 201;
        position: absolute;
        background: #fff;
        .title {
            text-align: center;
            line-height: 40px;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
        }
        .content-body {
            height: calc(100vh - 41px);
            display: flex;
            overflow: auto;
        }
    }
}

</style>